<template>
  <div class="login-container">
    <!-- 中间的白色内部容器 -->
    <div class="login-form-wrap">
      <!-- logo -->
      <div ref="logo" class="login-head">
        <div class="logo"></div>
      </div>
      <!-- 表单 -->
      <!--
        el-form 整个的大的form表单组件
          :model="form" 绑定一个form对象, 用于收集表单的数据 (将来进行表单校验, 也要用到这个属性)
          label-width="200px" 左侧label的宽度
        el-form-item 一个表单项, 一行就是一个el-form-item 包裹表单元素的

        el-input 输入框组件
          v-model="form.name" 和form中的属性, 双向数据绑定

        el-form组件, 有一个方法 validate 方法, 可以校验整个表单
      -->
      <el-form ref="myform" :rules="rules" class="login-form" :model="form">
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item prop="agree">
          <el-checkbox v-model="form.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" class="login-btn" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
// 如果一个页面, 只新建一个 .vue 文件
// 所有的内容, 都全都放到了这个 .vue 文件中, 非常难以维护的
// 将来一个页面, 新建一个目录, 存放当前页面相关的, 所有组件, 包括拆分的组件内容
// 消息提示:
// 1. this.$message('消息') 灰色
// 2. this.$message({
//      showClose: true,
//      message: '消息',
//      type: 'success',
//      duration: 10000
//   })  // 绿色
// 3. this.$message.success('提示')

// ref 和 $refs 一般配合使用, 可以用于获取dom元素, 或者获取vue组件

import { reqLogin } from '@/api/user.js'

export default {
  // 不加name, 默认调试工具, 会将文件名当成组件名
  name: 'Login',
  data () {
    return {
      form: {
        mobile: '13911111111',
        code: '246810',
        agree: true
      },
      rules: {
        // 配置mobile手机的校验
        // 1. 非空校验 required: true 必填项, 非空
        //    message错误提示
        //    trigger触发, 什么时候触发校验  blur失去焦点, change值改变的时候
        // 2. 长度校验, min max
        // 3. 正则校验 pattern
        // 4. 自定义校验, 自己写校验规则
        mobile: [
          { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: ['blur', 'change'] },
          { pattern: /^\d{6}$/, message: '请输入正确的6位验证码', trigger: ['blur', 'change'] }
        ],
        agree: [
          // 自定义校验规则, 验证agree字段, 是否同意了许可
          {
            // 自定义的校验函数
            // rule 规则, 是一个对象, 对象中会包含当前规则相关的一些信息, 比如校验的字段名是什么 agree
            // value 要校验的值
            // callback 是一个函数,
            // 1. 如果校验成功, 需要调用 callback()
            // 2. 如果校验失败, 需要调用 callback() 且需要传递错误的消息, callback(new Error('错误提示'))
            validator: (rule, value, callback) => {
              // console.log(rule)
              // console.log(value)
              // console.log(callback)
              if (value === false) {
                callback(new Error('请先同意用户许可'))
              } else {
                callback()
              }
            },
            // 触发校验
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    login () {
      // console.log(this.$refs.logo)
      // console.log(this.$refs.btn)
      // console.log(this.$refs.myform)
      // 点击登录按钮之前, 应该先校验整个form表单, 看是否通过了校验
      // this.$refs.myform.validate(...)
      this.$refs.myform.validate((flag) => {
        // flag 是一个布尔值, true 校验通过, false 校验失败
        // console.log(flag)
        if (!flag) return
        // 发送请求进行登录
        // this.$http.post(url, data)
        reqLogin(this.form.mobile, this.form.code).then(res => {
          console.log(res.data)
          this.$message.success('登录成功')
          this.$router.push('/')
        }).catch(e => {
          console.log(e)
          this.$message.error('手机号或者验证码错误')
        })
      })
    }
  }
}

</script>

<style lang="less">
// @ 指代 src 目录, 将来你找文件, 就可以从 src 出发
// css中, 需要进行额外的标识, 脚手架, 才会帮你将 @ 解析成路径
// 1. 如果是js代码的导入, @直接指代src目录
// 2. 如果css中的导入, @也可以指代src目录, 但是需要通过~进行标识
//    background-image: url('~@/assets/1.png')

// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background: url("~@/assets/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("~@/assets/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
